"use client";

import { MessageSquare, Users, Image as ImageIcon, Globe, Settings, LogOut } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useAuth } from "@/context/authContext";
import { NavIcon } from '@/components/NavIcon';
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { Button } from "../ui/button";
import { useRouter } from "next/navigation";

export type SidebarTab = "chat" | "contacts" | "moments" | "settings";

export default function SidebarTabs({
  activeTab,
  onTabChange,
}: {
  activeTab: SidebarTab;
  onTabChange: (tab: SidebarTab) => void;
}) {
  const { user, clearUser } = useAuth();
  const router = useRouter();

  const handleLogout = async () => {
    clearUser();
    router.replace('/login');
  }

  return (
    <nav className="w-16 dark:bg-stone-900 flex-shrink-0 flex flex-col items-center justify-between py-5 border-r dark:border-stone-800">
      <div className="flex flex-col items-center space-y-6">
        <Avatar>
          <AvatarImage src={user?.avatar || undefined} alt={user?.username || 'User'} />
          <AvatarFallback>{user?.username?.charAt(0).toUpperCase() ?? '?'}</AvatarFallback>
        </Avatar>

        <NavIcon
          icon={<MessageSquare size={24} />}
          tooltip="聊天"
          active={activeTab === 'chat'}
          onClick={() => onTabChange('chat')}
        />
        <NavIcon
          icon={<Users size={24} />}
          tooltip="通讯录"
          active={activeTab === 'contacts'}
          onClick={() => onTabChange('contacts')}
        />
        <NavIcon
          icon={<Globe size={24} />}
          tooltip="朋友圈"
          active={activeTab === 'moments'}
          onClick={() => onTabChange('moments')}
        />

        <div className="flex flex-col items-center space-y-6">
          <NavIcon 
            icon={<Settings size={24}/>} 
            tooltip="设置"
            active={activeTab === 'settings'}
            onClick={() => onTabChange('settings')}
          />
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                className="p-2 rounded-lg text-gray-600"
                onClick={handleLogout}
              >
                <LogOut size={24} />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="right" sideOffset={5}>
              <p>登出</p>
            </TooltipContent>
          </Tooltip>
        </div>
      </div>
    </nav>
  );
} 